<template>
  <div class="weui-panel-topup">
    <!-- <Weui-search-bar @search="search"></Weui-search-bar> -->
    <div class="weui-flex">
      <div class="weui-flex__item">
        <div class="weui-cells weui-cells_form mg-tb">
          <div class="weui-cell weui-cell">
            <p class="explanation">代充钻石</p>
          </div>
        </div>
        <div class="mg-tb height-px">
          <div class="weui-cell bold-font">
            现有钻石：{{mAmount}}
          </div>
          <div class="flex-box space-around">
           <!--  <div class="flex-33">
              <img :src="mePlayer.headUrl" alt="portrait" class="head-url">
            </div>
            <div class="flex-33">
              <span>{{mePlayer.nickname}}</span> 
            </div> -->
          </div>
        </div>
        <div class="substitude-body mg-tb flex-box nowrap">
          <div class="tip-content ">
            请输入玩家ID:
          </div>
          <div class="flex-12">
            <input class="amount-input" type="text" placeholder="ID" v-model="topupId" />
          </div>
          <div class="weui-btn_area button-area flex-123">
            <button class="weui-btn weui-btn_primary button-query" @click="queryTopupId">查询</button>
          </div>
        </div>
        <div class="substitude-body  mg-tb" v-if="switchPanel">
          <div class="weui-cell bold-font">
            玩家信息
          </div>
          <div class="flex-box space-around">
            <div class="weui-cell__">
              <img :src="topupPlayer.headUrl" alt="portrait" class="head-url">
            </div>
            <div>
              <span>{{topupPlayer.nickname}}</span>
            </div>
            <div class="weui-cell__">
              <span>现有钻石：{{amount}}</span>
            </div>
          </div>

          <div class="substitude-body mg-tb flex-box nowrap">
          <div class="tip-content ">
            请输入钻石数：
          </div>
          <div class="flex-12">
            <input class="amount-input" type="text" placeholder="代充钻石数" v-model="topupAmount" />
          </div>
          <div class="weui-btn_area button-area flex-123">
            <button class="weui-btn weui-btn_primary button-query" @click="confirmTopup">确定</button>
          </div>
        </div>
          
        </div>
        <div class="weui-cells nowrap flex-box">
          <div class="weui-btn_area button-area weui-cell weui-cell_access">
            <button class="weui-btn weui-btn_default button-half" @click="back2main">返回首页</button>
          </div>
           <div class="weui-btn_area button-area weui-cell weui-cell_access">
            <a class="weui-btn weui-btn_blue button-half" href="#/TopupRecord">充值记录</a>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog-wrapper" v-if="dialog">
      <div class="dialog-body">
        <div class="dialog-title">
          提示
        </div>
        <div class="dialog-content">
          {{dialogContent}}
        </div>
        <div class="dialog-actions">
        <div class="action-button" @click="closeDialog">
          <span>取消</span>
        </div>
        <div class="action-button confirm" @click="confirmDialog">
          <span>确定</span>
        </div>
      </div>
      </div>
     
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'Vuex'

export default {
  data() {
    return {
      topupId: '',
      topupAmount: '',
      topupPlayer : {
        headUrl: '',
        nickname: '',
        lftid: '',
        amount: 888
      },
      switchPanel: false,
      topUID: 0,
      amount: 0,
      mAmount: 0,
      mePlayer: {
        headUrl: '',
        nickname:'',
        amount: 0
      },
      dialog: false,
      dialogContent: '确认代充'
    }
  },
  computed: {
    ...mapState(['api', 'token', 'areaCode', 'user'])
  },
  mounted() {
    let userinfo = JSON.parse(localStorage.getItem('userinfo')).userinfo;

    this.mePlayer = userinfo;
    this.mAmount = userinfo.gameAmount;

    console.error(userinfo)
  },
  methods: {

        // 查询代充玩家ID
    queryTopupId() {
      window.btn_sound.play();

      const send = {
        lftid: this.topupId
      }
      this.api.homePage.queryTopupId(send).then(res => res.json()).then(data => {
        console.log('查询代充玩家ID', data)
        let source = data.source;
        if (data.errorCode === 0) {
          this.topUID = source.uid;
          this.amount = source.amount;
          this.topupPlayer = source;
          this.switchPanel = true;
        } else {
          this.switchPanel = false;
          $.alert(data.message);          
        }
      })
    },
    // 确认充值
    confirmTopup() {
      window.btn_sound.play();
      let that = this;
      //滚动到顶部
      window.scrollTo(0, 0);
      //滚动到底部
      window.scrollTo(0, document.documentElement.clientHeight);

      let result = confirm(`确认要为用户${this.topupPlayer.nickname}代充钻石吗？`);
      if(result) {
        this.substitudeTopup()
        return;
      } else {

      }

      // $.confirm(`确认要为用户${this.topupPlayer.nickname}代充钻石吗？`, function(suc) {
      //   that.substitudeTopup();
      // },
      // function(fai) {

      // })
      
    },
    closeDialog() {
      window.btn_sound.play();
      this.dialog = false;
    },
    confirmDialog() {
      window.btn_sound.play();
      this.substitudeTopup();
    },
    substitudeTopup() {
      const send = {
        uid: this.topUID,
        number: this.topupAmount
      }
      if (Number.isNaN(Number(this.topupAmount))){
        return $.alert('请输入正确的数字');
      }
      if(Number(this.topupAmount) <= 0 )
      {
        return $.alert('充值数额必须大于0');
      }
      this.api.homePage.confirmTopup(send).then(res => res.json()).then(data => {
        console.log('getNotice', data)
      let source = data.source;
        if (data.errorCode === 0) {
          let $this = this;
          
          $.alert(`您成功为玩家${this.topupPlayer.nickname}(ID:${this.topupPlayer.lftid})充入${this.topupAmount}钻石`, function() {
            // $this.$router.push('/')
            $this.amount = Number($this.amount) +  Number($this.topupAmount);
            $this.mAmount -= Number($this.topupAmount);
            console.log(typeof $this.amount, typeof $this.mAmount,typeof $this.topupAmount )
            $this.mePlayer.gameAmount = $this.amount;
            localStorage.setItem('userinfo', JSON.stringify({userinfo: $this.mePlayer}));
            // body...
          });
        } else  {
          $.alert(data.message);          
        }
      })
    },
    back2main() {
      window.btn_sound.play();
      this.$router.push('/')
    }
  }
}

</script>

<style lang="less" scoped>
.weui-flex__item{
      background: #f5f5f5;
}
.weui-panel-topup {
  height: 100%;
  background: transparent;
  position: relative;
}
.weui-flex {
  height: 100%;
  align-items: center;
  justify-content: center;
}
.explanation {
  font-size: 1.1rem;
  text-align: center;
  padding: 1.2rem 0;
  width: 100%;
}


.substitude-header 
{
  background-color: #2196f3;
  color: #fff;
  font-size: 1.2em;
  padding: 6px;
}


.substitude-body 
{
  padding: 12px 4px;
  border-top: solid #ddd 1px;
  border-bottom: solid #ddd 1px;
  
}
.tip-content {
    padding: 2px;
  }
  input {
    border: #b2b2b2 solid 1px;
    margin: 8px 1rem;
    padding: 8px;
    box-sizing: content-box;
    border-radius: 4px;
        width: 84%;
  }
  .button-area {
    width: 48%;
    flex-basis: 48%;
  }
  .button-half {
    width: 100%;
    display: inline-block;
  }
   .button-query {
    width: 76%;
    white-space: nowrap;
   }
  img.head-url {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;

  }
.weui-cell:before { 
  border-color: transparent;
}
.mg-tb {
  margin-top: 6px;
  margin-bottom: 6px;
  background-color: #fff;
}
 .flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

 .flex-1 {
  flex-basis: 30%;
  margin: 8px!important;
 }
 .flex-12 {
 flex-basis: 40%;
  margin: 0!important;
  input {
    margin: 0;
    width: 80%;
  }
 }
  .flex-123 {
 flex-basis: 24%;
  margin: 0!important;

 }
 .bold-font {
  font-size: 1rem;
  font-weight: bold;
 }
 .space-around {
  justify-content: space-around;
 }
 .flex-33 {
  flex-basis: 33.33%;
 }
 .btn-confirm{
  display: flex;
  justify-content: flex-end;
  button {
    width: 36%;
    margin: 0;
  }
 }
 .height-px {
  padding: 5px;
 }

 .nowrap {
  flex-wrap: nowrap;
 }

 .weui-btn_blue {
  background-color: #03a9f4;
 }

 .amount-input  {
  width: 100%;
 }

 .dialog-wrapper {
  position: fixed;
  background-color: rgba(0,0,0,0.5);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .1s 0 linear;
  .dialog-body {
    width: 80%;
    min-height: 6rem;
    border-radius: 8px;
    display: flex;
    background-color: white;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    .dialog-title {
        font-size: 1rem;
        text-align: center;
      }
    .dialog-content{
        font-size: 0.8rem;
        text-align: center;
    }
    .dialog-actions {
      display: flex;
      justify-content: center;
      align-items: center;
      .action-button {
        height: 2rem;
        flex-basis: 50%;
        border-top: 1px solid #ddd;
        border-right: 1px solid #ddd;
        line-height: 2rem;
        vertical-align: middle;
        text-align: center;
        font-size: 0.8rem;
        &.confirm {
          color: #1aad19;
          border-right: 1px solid transparent;
        }
      }
    }
  }
 }
</style>